<template>
	<view class="footerBox">
		<view class="fItem" v-for="dt in lists" :key="dt.path" :class="{'selected':path==dt.path}" @click="goPage(dt)">
			<view class="imgbox">
				<image class="oimg" :src="path==dt.path?dt.selectedIconPath:dt.iconPath" mode="scaleToFill"></image>
			</view>
			<view class="my-font-family txt">{{dt.name}}</view>
		</view>
	</view>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	export default defineComponent({
		components:{
			
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				lists:[
					{
						name:'首页',
						path:'pages/index/index',
						iconPath:'/static/images/tab11.png',
						selectedIconPath:'/static/images/tab12.png'
					},
					{
						name:'居家服务',
						path:'pages/service/service',
						iconPath:'/static/images/tab21.png',
						selectedIconPath:'/static/images/tab22.png'
					},
					{
						name:'乐龄陪伴',
						path:'pages/keep/keep',
						iconPath:'/static/images/tab31.png',
						selectedIconPath:'/static/images/tab32.png'
					},
					{
						name:'乐龄商城',
						path:'pages/mall/mall',
						iconPath:'/static/images/tab41.png',
						selectedIconPath:'/static/images/tab42.png'
					},
					{
						name:'我的',
						path:'pages/home/home',
						iconPath:'/static/images/tab51.png',
						selectedIconPath:'/static/images/tab52.png'
					}
				],
				tabIndex:0,
				path:''
			})
			
			onMounted(()=>{
				const pages = getCurrentPages()
				const currentRoute = pages[pages.length - 1].route
				state.path = currentRoute
			})
			
			const goPage = (o)=>{
				state.path = o.path
				uni.navigateTo({
					url: '/'+o.path
				});
			}
			
			return {
				...toRefs(state),
				goPage
			}
		}
	})
</script>

<style lang="scss">
	.footerBox{
		display: flex;
		position: fixed;
		z-index: 1000;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 110rpx;
		background: #fff;
		.fItem{
			display: flex;
			flex: 1;
			flex-flow: column;
			align-items: center;
			justify-content: center;
			line-height: normal;
			.imgbox{
				width: 60rpx;
				height: 60rpx;
				.oimg{
					width: 100%;
					height: 100%;
				}
			}
			.txt{
				font-size: 30rpx;
				color: #edddca;
			}
			&.selected{
				.txt{
					color: #fba70e;
				}
			}
		}
	}
</style>
